<template>
  <div class="message">
    <van-nav-bar
      title="消息中心"
      left-arrow
      right-text="全部已读"
      fixed
      placeholder
      @click-left="back"
      style="background: #ffffff"
    />
    <div class="student__tabs">
      <van-tabs line-width="24px" line-height="4px" v-model:active="active">
        <van-tab title="系统消息"></van-tab>
        <van-tab>
          <template #title>
            系统公告
            <van-icon name="arrow-down" v-if="active == 1" @click="showTop = true"
          /></template>
          <div class="contBox" v-if="showTop">
            <div class="list" :class="{active: activeIndex == i}" v-for="i in 5" :key="i" @click="clickItem(i)">社会新闻</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="itemCont">
      <div class="message__search" v-if="active == 1">
        <van-search
          shape="round"
          v-model="keyword"
          placeholder="请输入搜索关键词"
        />
      </div>
      <Card
        date="03月23日 20:12"
        margin-top="20px"
        title="提问邀请回答"
        content="陈洁邀请你回答关于#什么时候才是你最开心的时候？#回答 快去回答吧"
      ></Card>
      <CardImage
        margin-top="20px"
        :img="img"
        title="系统公告名称"
        date="03月15号 15:00"
        content="系统公告描述系统公告描系统公告描述系统公告描述系统公告描述系统公告描述系统公描述系统公告描述系统公告描述系统公描"
      ></CardImage>
    </div>
  </div>
</template>
<script name="message" setup>
import { ref } from "vue";
import Card from "./components/card.vue";
import CardImage from "./components/card-image.vue";
import imgUrl from "@/assets/images/banner.png";
const img = ref(imgUrl);
const keyword = ref("");
const active = ref(0);
const showTop = ref(false);
const value1 = ref(0);
const activeIndex = ref(1);
const option1 = [
  { text: "系统公告", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];
const back = () => {
  window.history.back();
};
const clickItem = (i) => {
    activeIndex.value = i;
    showTop.value = !showTop.value;
}
</script>
<style lang="scss" scoped>
.message {
  min-height: 100vh;
  background-color: #f5f9fc;
  //padding: 0 16px 16px;
  .student__tabs {
    background: #ffffff;
    ::v-deep {
      .van-tabs__line {
        height: 4px;
        background: linear-gradient(126deg, #54d781 0%, #00c37d 100%);
        border-radius: 2px;
      }
      .van-hairline--bottom:after {
        border-bottom-width: 0;
      }
    }
    .contBox {
      position: absolute;
      width: 100%;
      height: calc(100vh - 90px);
      background: rgba(0, 0, 0, 0.2);
      z-index: 9;

      .list {
        padding: 0 14px;
        height: 52px;
        background: #ffffff;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #676b6b;
        line-height: 52px;
        text-align: left;
        font-style: normal;
        border-bottom: 1px solid #f0f0f0;
      }
      .active {
        color: #171A1D;
      }
    }
  }
  .itemCont {
    padding: 0 16px 16px;
  }
  &__search {
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    height: 40px;
    margin-top: 12px;
    ::v-deep {
      .van-search {
        padding: 0;
      }
      .van-search__field {
        line-height: 40px;
      }
    }
  }
}
</style>
